import styled from "styled-components";
import { useState } from "react";
const Wrapper=styled.div`
    
    >.note,.time{
        display:flex;
        justify-content: center;
        align-items:center;
        padding:5px;
        margin-top:5px;
        >.title{
            margin:5px;
        }
        >input{
            padding:5px;
            border-radius:5px;
            border:1px solid #a1a0a0;
        }
    }
    >.button-wrapper{
        display:flex;
        justify-content: flex-end;
        padding:10px;
        padding-right:20px;
        >button{
            background: rgb(59, 85, 71);
            color:rgb(221, 216, 216);
            padding:5px 15px;
            border-radius:5px;
            border:1px solid #a1a0a0;
            box-shadow: 1px 1px 2px 2px rgb(223, 220, 220);
        }
        >.close{
            margin:0px 20px;
            background: rgb(132, 134, 133);
        }
    }
`
type UserTime={
    note:string,
    time:string,
}
type TProp={
    onChange:(userTime?:UserTime)=>void
}

const NewClock=(props:TProp)=>{
    const [userTime,setUserTime]=useState<UserTime>({note:'',time:''})
    return(
        <Wrapper>
            <div className="note" >
                <div className="title">备注:</div>
                <input type='text' value={userTime.note} placeholder='请输入备注' onChange={(e)=>{setUserTime({...userTime,note:e.target.value}) }}/>
            </div>
            <div className="time"  >
                <div className="title">时间:</div>
                <input type='text' value={userTime.time} placeholder='请输入时长(分钟)' onChange={(e)=>{setUserTime({...userTime,time:e.target.value})}}/>
            </div>
            <div className='button-wrapper'>
                <button onClick={()=>{props.onChange(userTime)}}>确认</button>
                <button className="close" onClick={()=>{props.onChange()}}>取消</button>
            </div>
        </Wrapper>
    )
}
export default NewClock;